<script setup>
import { ref, onMounted } from "vue";
import useGlobalProperties from "@/hooks/globalVar";
import QRCode from "qrcode";
import { upload } from "@/api/api.js";
import galley02 from "@/assets/images/big/galley-2.jpg";
import galley01 from "@/assets/images/big/galley-1.jpg";
import galley03 from "@/assets/images/big/galley-3.jpg";
import galley04 from "@/assets/images/big/galley-4.jpg";

const step = ref(0);
const qrcode = ref(null);
const resultObject = ref({});
const baseImgUrl = useGlobalProperties().$baseImgUrl;
onMounted(async () => {
  resultObject.value = JSON.parse(localStorage.getItem("resultObject"));
  console.log(resultObject, "resultObject");
  if (resultObject.value.success == true) {
    resultObject.cropped_image =
      baseImgUrl + "output/" + resultObject.task_id + "/result.png";

    await upload({ task_id: /*resultObject.value.task_id*/"20251010153518626763" }).then((res) => {
      if(res.data.success == true){
        QRCode.toCanvas(qrcode.value, res.data.dir, {
          width: 400,
          height: 400,
          margin: 0,
          color: {
            dark: "#ffffff",
            light: "#00000000",
          },
        });
      }
      // console.log(data, "data");
      // userData.value = data.users.map((item) => {
      //   let bigImg = null;
      //   if (item.localname === "alsoudah") {
      //     bigImg = galley02;
      //     item.type = "Alsoudah";
      //   } else if (item.localname === "kingsalmanpark") {
      //     bigImg = galley01;
      //     item.type = "Park";
      //   } else if (item.localname === "newmurabba") {
      //     bigImg = galley03;
      //     item.type = "Murabba";
      //   } else if (item.localname === "diriyah") {
      //     bigImg = galley04;
      //     item.type = "Diriyah";
      //   }
      //   return {
      //     ...item,
      //     bigImg: bigImg,
      //   };
      // });
      // totalCount.value = data.total_count;
    });
  }

  // if (resultObject.value.qr_url) {
  //   QRCode.toCanvas(qrcode.value, resultObject.value.qr_url, {
  //     width: 400,
  //     height: 400,
  //     margin: 0,
  //     color: {
  //       dark: "#ffffff",
  //       light: "#00000000",
  //     },
  //   });
  // }
});
</script>

<template>
  <div class="small">
    <div class="title" v-show="step === 0">
      We’re all done!<br />
      We hope you like the result!
    </div>
    <div class="share" :style="{ filter: step === 1 ? 'blur(20px)' : 'none' }">
      <img :src="resultObject.cropped_image" />
    </div>
    <stcBotton class="btnstart" title="Share" @click="step = 1" />
  </div>
  <div class="small small2" v-show="step === 1">
    <div class="qrcode">
      <canvas ref="qrcode"></canvas>
    </div>
    <div class="title2">
      Spread the creativity, <br />share these AI images<br />
      on your social feeds!
    </div>
    <stcBotton class="btnstart" title="Home" targetRoute="/small" />
  </div>
</template>

<style scoped lang="scss">
.small2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: linear-gradient(
    180deg,
    rgba(79, 0, 140, 0) 0%,
    rgba(79, 0, 140, 1) 83%
  );
}
.title {
  width: 100%;
  position: absolute;
  top: 5%;
  font-size: 60px;
  font-family: "stc-medium";
  color: #fff;
  text-align: center;
  line-height: 80px;
}
.qrcode {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0);
  canvas {
    width: 100%;
    height: 100%;
  }
}
.title2 {
  width: 100%;
  position: absolute;
  top: 55%;
  font-size: 52px;
  font-family: "stc-medium";
  color: #fff;
  text-align: center;
  line-height: 1.5;
}
.share {
  width: 100%;
  height: 810px;
  overflow: hidden;
  position: absolute;
  top:21%;
  left: 50%;
  transform: translate(-50%, 0);
  filter: blur(20px);
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.btnstart {
  left: 50%;
  top: 86%;
  transform: translate(-50%, 0);
}
</style>
